<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家政服务小程序</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
            max-width: 750px;
            margin: 0 auto;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
        }
        
        .swiper-slide {
            border-radius: 12px;
            overflow: hidden;
        }
        
        .active-tab {
            color: #2563eb;
            position: relative;
        }
        
        .active-tab::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
        .nav-tab.active {
            color: #1890ff;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: #1890ff;
            border-radius: 2px;
        }
        .service-card {
            transition: all 0.3s ease;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        .vip-badge {
            background: linear-gradient(90deg, #ffd700 0%, #ffb700 100%);
            color: #8a6d00;
            font-weight: bold;
        }
        .btn-primary {
            background: linear-gradient(90deg, #3498db 0%, #1a5f9e 100%);
            color: white;
            border-radius: 30px;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background: linear-gradient(90deg, #2980b9 0%, #154a7a 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        }
        .btn-secondary {
            background: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%);
            color: white;
            border-radius: 30px;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            background: linear-gradient(90deg, #27ae60 0%, #219653 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
        }
        .feature-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
        .nav-item {
            position: relative;
            padding-bottom: 8px;
            transition: all 0.3s ease;
        }
        .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background: #fff;
            border-radius: 3px;
        }
        .nav-item:hover {
            transform: translateY(-3px);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <!-- <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center text-white font-bold mr-2">
                    家
                </div>
                <span class="text-lg font-bold text-blue-600">家政服务</span>
            </div>
            
            <div class="flex-1 mx-4">
                <div class="relative">
                    <input type="text" placeholder="搜索服务..." class="w-full py-2 px-4 pl-10 bg-gray-100 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-300">
                    <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
                </div>
            </div>
            
            <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                <i class="fas fa-user text-gray-500"></i>
            </div>
        </div> -->
        <div class="bg-white p-4 border-b border-gray-200">
            <div class="flex items-center">
                <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i>
                <span class="text-gray-700 mr-2">当前城市：</span>
                <span class="font-medium text-blue-600">北京市</span>
                <i class="fas fa-chevron-down text-gray-500 ml-1 text-sm"></i>
            </div>
        </div>
    </header>

    <!-- 城市切换 -->
    <!-- <div class="bg-white p-4 border-b border-gray-200">
        <div class="flex items-center">
            <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i>
            <span class="text-gray-700 mr-2">当前城市：</span>
            <span class="font-medium text-blue-600">北京市</span>
            <i class="fas fa-chevron-down text-gray-500 ml-1 text-sm"></i>
        </div>
    </div> -->

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 pb-20 pt-4">

        <!-- 快捷服务菜单 -->
        <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
            <div class="grid grid-cols-4 gap-4">
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 mb-1">
                        <i class="fas fa-broom text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700">家政服务</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-500 mb-1">
                        <i class="fas fa-hand-holding-heart text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700">康养服务</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-500 mb-1">
                        <i class="fas fa-clock text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700">钟点工</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-500 mb-1">
                        <i class="fas fa-baby text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700">月嫂</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center text-red-500 mb-1">
                        <i class="fas fa-utensils text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700">做饭</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500 mb-1">
                        <i class="fas fa-user-md text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700">护理</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 mb-1">
                        <i class="fas fa-tshirt text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700">洗衣</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-teal-500 mb-1">
                        <i class="fas fa-ellipsis-h text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700">更多</span>
                </a>
            </div>
        </div>

        <div class="mb-6">
            <!-- <h2 class="text-xl font-bold mb-4 text-center">VIP专属服务</h2> -->
            
            <div class="grid grid-cols-2 gap-4">
                <!-- 阿姨VIP -->
                <div class="service-card bg-yellow-50 p-4 relative">
                    <div class="vip-badge absolute top-0 right-0 px-3 py-1 rounded-bl-lg text-xs">
                        <i class="fas fa-crown mr-1"></i>阿姨VIP
                    </div>
                    <div class="mt-5">
                        <h3 class="font-bold text-lg mb-2">跟雇主快速开聊</h3>
                        <p class="text-sm text-gray-600 mb-4">VIP阿姨可直接与雇主沟通</p>
                        <button class="btn-secondary w-full py-2 font-medium">快速开聊</button>
                    </div>
                </div>
                
                <!-- 雇主VIP -->
                <div class="service-card bg-purple-50 p-4 relative">
                    <div class="vip-badge absolute top-0 right-0 px-3 py-1 rounded-bl-lg text-xs">
                        <i class="fas fa-crown mr-1"></i>雇主VIP
                    </div>
                    <div class="mt-5">
                        <h3 class="font-bold text-lg mb-2">匹配心仪阿姨</h3>
                        <p class="text-sm text-gray-600 mb-4">精准匹配最合适的家政人员</p>
                        <button class="btn-secondary w-full py-2 font-medium">立即申请</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 工作区域 -->
        <div class="mb-6">
            <!-- <h2 class="text-xl font-bold mb-4 text-center">便捷找工作</h2> -->
            
            <div class="grid grid-cols-2 gap-4">
                <div class="service-card bg-rose-50 p-5 text-center">
                    <div class="text-3xl text-rose-500 mb-3">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">自主找工作</h3>
                    <p class="text-sm text-gray-600 mb-4">主动寻找适合自己的工作机会</p>
                    <button class="btn-primary w-full py-2 font-medium">立即申请</button>
                </div>
                
                <div class="service-card bg-cyan-50 p-5 text-center">
                    <div class="text-3xl text-cyan-500 mb-3">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">匹配心仪阿姨</h3>
                    <p class="text-sm text-gray-600 mb-4">平台智能根据需求匹配优质阿姨</p>
                    <button class="btn-primary w-full py-2 font-medium">立即申请</button>
                </div>
            </div>
        </div>

        <!-- 推荐服务 -->
        <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-gray-800">热门推荐</h2>
                <a href="#" class="text-sm text-blue-500">查看更多 <i class="fas fa-angle-right"></i></a>
            </div>
            
            <div class="space-y-4" onclick="window.location.href='elderly-service-detail.html'">
                <!-- 服务卡片1 -->
                <div class="flex card-hover p-2 rounded-lg hover:bg-gray-50">
                    <div class="w-24 h-24 bg-cover bg-center rounded-lg" style="background-image: url('https://s.coze.cn/image/_i5sNuFBun8/');"></div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium text-gray-800">全屋深度清洁</h3>
                        <div class="flex items-center mt-1">
                            <div class="flex text-yellow-400 text-xs">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">4.8 (256)</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-red-500 font-bold">¥128 <span class="text-xs text-gray-500 line-through">¥168</span></span>
                            <button class="text-xs bg-blue-500 text-white px-2 py-1 rounded-full">立即预约</button>
                        </div>
                    </div>
                </div>
                
                <!-- 服务卡片2 -->
                <div class="flex card-hover p-2 rounded-lg hover:bg-gray-50">
                    <div class="w-24 h-24 bg-cover bg-center rounded-lg" style="background-image: url('https://s.coze.cn/image/-KeVe34p7EE/');"></div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium text-gray-800">金牌月嫂服务</h3>
                        <div class="flex items-center mt-1">
                            <div class="flex text-yellow-400 text-xs">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">5.0 (189)</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-red-500 font-bold">¥8800/月</span>
                            <button class="text-xs bg-blue-500 text-white px-2 py-1 rounded-full">立即预约</button>
                        </div>
                    </div>
                </div>
                
                <!-- 服务卡片3 -->
                <div class="flex card-hover p-2 rounded-lg hover:bg-gray-50">
                    <div class="w-24 h-24 bg-cover bg-center rounded-lg" style="background-image: url('https://s.coze.cn/image/kJE0PUuMqUE/');"></div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium text-gray-800">老人专业陪护</h3>
                        <div class="flex items-center mt-1">
                            <div class="flex text-yellow-400 text-xs">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">4.2 (103)</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-red-500 font-bold">¥150/天</span>
                            <button class="text-xs bg-blue-500 text-white px-2 py-1 rounded-full">立即预约</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-gray-800">推荐阿姨</h2>
                <a href="#" class="text-sm text-blue-500">查看更多 <i class="fas fa-angle-right"></i></a>
            </div>
            
            <div class="space-y-4">
                <div class="aunt-card bg-white rounded-lg shadow mb-3 p-4">
                    <div class="flex items-center mb-3">
                        <img src="https://s.coze.cn/image/3mePYv9ZxVs/" class="w-12 h-12 rounded-full object-cover mr-3" alt="阿姨头像">
                        <div class="flex-1">
                            <h3 class="font-medium text-gray-800">张阿姨</h3>
                            <div class="flex items-center mt-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                                <span class="text-xs text-gray-500 ml-1">4.8分</span>
                            </div>
                        </div>
                        <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">预约</span>
                    </div>
                   
                </div>

                <div class="aunt-card bg-white rounded-lg shadow mb-3 p-4">
                    <div class="flex items-center mb-3">
                        <img src="https://s.coze.cn/image/s8nYrAYTV4s/" class="w-12 h-12 rounded-full object-cover mr-3" alt="阿姨头像">
                        <div class="flex-1">
                            <h3 class="font-medium text-gray-800">李阿姨</h3>
                            <div class="flex items-center mt-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <span class="text-xs text-gray-500 ml-1">4.0分</span>
                            </div>
                        </div>
                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">预约</span>
                    </div>
                </div>

                <div class="aunt-card bg-white rounded-lg shadow mb-3 p-4">
                    <div class="flex items-center mb-3">
                        <img src="https://s.coze.cn/image/3_lhENWfi_M/" class="w-12 h-12 rounded-full object-cover mr-3" alt="阿姨头像">
                        <div class="flex-1">
                            <h3 class="font-medium text-gray-800">王阿姨</h3>
                            <div class="flex items-center mt-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <span class="text-xs text-gray-500 ml-1">5.0分</span>
                            </div>
                        </div>
                        <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full">预约</span>
                    </div>
                </div>
            </div>
        </div>  
    </main>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 max-w-750 mx-auto">
        <a href="user-home.html" class="nav-tab active flex flex-col items-center px-4 py-1 text-xs">
            <i class="fas fa-home text-lg mb-1"></i>
            <span>首页</span>
        </a>
        <a href="categories.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-list text-lg mb-1"></i>
            <span>分类</span>
        </a>
        <a href="member-exclusive.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-crown text-lg mb-1"></i>
            <span>会员专享</span>
        </a>
        <a href="../class/business-school.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-graduation-cap text-lg mb-1"></i>
            <span>商学院</span>
        </a>
        <a href="user-profile.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-user text-lg mb-1"></i>
            <span>我的</span>
        </a>
    </div>

    <script>
        // 简单的轮播图实现
        document.addEventListener('DOMContentLoaded', function() {
            // 轮播图逻辑
            let currentSlide = 0;
            const slides = document.querySelectorAll('.swiper-slide');
            const pagination = document.querySelector('.swiper-pagination');
            
            // 创建分页点
            slides.forEach((_, index) => {
                const dot = document.createElement('div');
                dot.className = 'w-2 h-2 bg-white rounded-full opacity-50';
                dot.addEventListener('click', () => {
                    goToSlide(index);
                });
                pagination.appendChild(dot);
            });
            
            // 更新分页点状态
            function updatePagination() {
                const dots = pagination.querySelectorAll('div');
                dots.forEach((dot, index) => {
                    if (index === currentSlide) {
                        dot.classList.remove('opacity-50');
                        dot.classList.add('opacity-100');
                    } else {
                        dot.classList.add('opacity-50');
                        dot.classList.remove('opacity-100');
                    }
                });
            }
            
            // 跳转到指定幻灯片
            function goToSlide(index) {
                currentSlide = index;
                const offset = -currentSlide * 100;
                document.querySelector('.swiper-wrapper').style.transform = `translateX(${offset}%)`;
                updatePagination();
            }
            
            // 自动轮播
            let slideInterval = setInterval(() => {
                currentSlide = (currentSlide + 1) % slides.length;
                goToSlide(currentSlide);
            }, 3000);
            
            // 初始化
            updatePagination();
            
            // 鼠标悬停时暂停轮播
            const swiper = document.querySelector('.swiper-container');
            swiper.addEventListener('mouseenter', () => {
                clearInterval(slideInterval);
            });
            
            swiper.addEventListener('mouseleave', () => {
                slideInterval = setInterval(() => {
                    currentSlide = (currentSlide + 1) % slides.length;
                    goToSlide(currentSlide);
                }, 3000);
            });
        });
    </script>
</body>
</html>